<template>


	<view class="index_seach">

		<view class="top" v-if="top" @tap="backtop">
			<img src="../../static/top.png" alt="" />
		</view>
		<view class="index_input">
			<img class="seach_img" src="../../static/seach.png" alt="" srcset="" />
			<input type="text" confirm-type="search" @confirm="doSearch" v-model="seachVal" placeholder="请选择作者/诗名/内容"
				placeholder-class="pla" />
			<view class="uni-list-cell-db seachType">
				<picker @change="bindPickerChange" :value="indexSelect" :range="arraySelect">
					<view class="uni-input">{{arraySelect[indexSelect]}}</view>
				</picker>
				<img class="pikerimg" src="../../static/xiala1.png" alt="" srcset="" />
			</view>

		</view>
		<view class="hot_poetry hot_author">
			<view class="" v-if="shiciList.length>0">
				<div class="poetry" v-for="(item,index) in shiciList" @click="poetrydetail(item)">
					<div class="title">{{item.title}}</div>
					<p class="author">{{item.author}}</p>
					<div class="content" v-html="item.content">

					</div>
				</div>

			</view>
			<view class="" v-else>
				<p style="text-align: center;color: #333;padding-top: 50px;">
					暂无数据！
				</p>
			</view>


		</view>
		<div class="more">
			<p>{{moreText}}</p>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageNum: 0,
				shiciList: [],
				indexSelect: 0,
				arraySelect: ['搜作者', '搜诗句', '搜诗名'],
				moreText: '',
				types: 0,
				seachVal: "",
				shiciList: [],
				top: false
			}
		},
		onLoad(options) {
			if (options.name) {
				console.log(options.name)
				this.seachVal = options.name;
				this.seachList()
			}
		},
		onShareAppMessage(res) {
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
			return {
				title: "一起来学古诗词吧",
				imageUrl: 'https://www.leedong.top/img/11556.png'
			}

		},
		//2.分享到朋友圈
		onShareTimeline() {

			return {
				title: '一起来学古诗词吧',
				imageUrl: 'https://www.leedong.top/img/11556.png'

			}
		},
		methods: {
			onReachBottom() {
				this.top = true
				this.seachList()
			},
			backtop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 100,
				});
			},
			bindPickerChange(v) {
				console.log(v)
				this.types = v.detail.value;
				this.indexSelect = v.detail.value;
			},
			onPageScroll(e) { //根据距离顶部距离是否显示回到顶部按钮
				if (e.scrollTop > 100) { //当距离大于10时显示回到顶部按钮
					this.top = true
				} else {
					this.top = false
				}
			},
			async seachList() {

				const data = await this.$api.seach({
					content: this.seachVal,
					type: this.types
				});
				this.shiciList = data.rows
			},

			poetrydetail(t) {
				uni.navigateTo({
					url: '/pages/poetrydetail/index?title=' + JSON.stringify(t)
				})
			},
			doSearch() {
				if (!this.seachVal) {
					uni.showToast({
						title: '输入不能为空',
						icon: 'none'

					})
					return;
				}
				this.seachList()
			},
			backtop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 100,
				});
			},
			onPageScroll(e) { //根据距离顶部距离是否显示回到顶部按钮
				if (e.scrollTop > 100) { //当距离大于10时显示回到顶部按钮
					this.top = true
				} else {
					this.top = false
				}
			}
		}

	}
</script>

<style lang="scss">
	.index_seach {
		height: 50px;
		width: 100%;
		background-color: #7d8468;

		.index_input {
			width: 97%;
			height: 50px;
			margin: auto;
			display: flex;
			align-items: center;
			position: relative;

			input {
				height: 28px;
				border-radius: 20px;
				width: 100%;
				background-color: #fff;
				padding-left: 30px;
				font-size: 14px;
			}

			.seach_img {
				width: 32px;
				position: absolute;
				height: 32px;
			}

			.pikerimg {
				width: 20px;

				height: 20px;
			}

			.seachType {
				position: absolute;
				right: 0px;
				font-size: 26rpx;
				color: #6d6d6d;
				width: 65px;
				height: 28px;
				line-height: 27px;
				background: #f5f5f5;
				border-radius: 0 20px 20px 0;
				text-align: center;
				display: flex;
				padding-left: 10rpx;
				align-items: center;
				z-index: 10000;
			}

			.pla {
				padding-left: 25px;
				font-size: 14px;
			}

		}

		.hot_poetry {
			margin-top: 10px;


			.poetry {
				text-align: center;
				width: 100%;
				border-bottom: 1px solid #d2d0bb;
				background: #f0efe3;


				.title {
					padding-top: 10px;
				}

				.author {
					font-size: 13px;
					color: #9a8383;
					padding: 10px;
				}

				.content {
					font-size: 14px;
					padding-bottom: 20px;
					color: #716363;

				}
			}

			.more {
				text-align: center;

				span {
					font-size: 12px;
					color: #9a8383;
				}
			}
		}

		.top {
			position: fixed;
			bottom: 20px;
			right: 5px;
			z-index: 1000;

			img {
				width: 32px;
				height: 32px;
			}
		}
	}
</style>